<template>
    <el-container style="min-height: 100vh">
      <el-container>
        <el-main v-if="roles === 'superadmin'">
            <h1>你没有此操作</h1>
            </el-main>
            <el-main v-if="roles === 'admin'">
            <h1>你没有此操作</h1>
            </el-main>
        <el-main v-if="roles === 'student'">
          <div style="margin: 10px 0">
            <!-- <el-input style="width: 200px" placeholder="请输入宿舍类型 " suffix-icon="el-icon-message" v-model="category"
                        class="mll-5"></el-input> -->
            <el-input style="width: 200px" placeholder="请输入宿舍楼栋 " suffix-icon="el-icon-search"
              v-model="floor_num"></el-input>
            <el-button class="mll-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
          </div>
          <div style="margin: 10px 0">
            <el-button type="primary" @click="handleAdd" >新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          </div>
  
          <el-table :data="tableData" border stripe :header-cell-class-name="headerBg"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="repair_num" label="报修编号" width="75">
            </el-table-column>
            <el-table-column prop="stu_num" label="学号" width="75">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="100">
            </el-table-column>
            <el-table-column prop="floor_num" label="楼号" width="100">
            </el-table-column>
            <el-table-column prop="layer" label="楼层" width="100">
            </el-table-column>
            <el-table-column prop="room_num" label="宿舍号" width="100">
            </el-table-column>
            <el-table-column prop="repair_time" label="报修时间" width="100">
            </el-table-column>
            <el-table-column prop="info" label="报修详细" width="100">
            </el-table-column>
            <el-table-column prop="yes_no" label="是否处理" width="100">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
                <el-button type="danger" slot="reference" @click="handleDelete(scope.row)">删除 <i
                    class="el-icon-remove-outline"></i></el-button>
                <el-dialog title="提示" :visible.sync="delVisibleaa" width="300px" center>
                  <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="delVisibleaa = false">取 消</el-button>
                    <el-button type="primary" @click="deleteRow()">确 定</el-button>
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
          <div style="padding: 10px 0; text-align: center;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
              :page-sizes="[5, 8, 10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
              >
            </el-pagination>
          </div>
          ​ <el-dialog title="报修信息" :visible.sync="dialogFormVisible" width="50%">
            ​ <el-form label-width="80px" size="small" >
              <!-- ​ <el-form-item label="学号">
                ​ <el-input v-model="form.stu_num" autocomplete="off"></el-input>
                ​ </el-form-item>
              ​ <el-form-item label="楼栋">
                ​ <el-input v-model="form.floor_num" autocomplete="off"></el-input>
                ​ </el-form-item>
              ​ <el-form-item label="楼层">
                ​ <el-input v-model="form.layer" autocomplete="off"></el-input>
                ​ </el-form-item>
              ​ <el-form-item label="宿舍号">
                ​ <el-input v-model="form.room_num" autocomplete="off"></el-input>
                ​ </el-form-item> -->
              ​ <el-form-item label="报修详情">
                ​ <el-input v-model="form.info" autocomplete="off"></el-input>
                ​ </el-form-item>
              <el-form-item label="是否处理">
                <el-select v-model="form.yes_no" autocomplete="off">
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
              ​ </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div> ​
          </el-dialog>
  
          <!-- ​ <el-dialog title="报修信息" :visible.sync="dialogFormVisibles" width="50%">
            ​ <el-form label-width="80px" size="small">
              ​ <el-form-item label="学号">
                ​ <el-input v-model="form.stu_num" autocomplete="off"></el-input>
                ​ </el-form-item>
              ​ <el-form-item label="楼栋">
                ​ <el-input v-model="form.floor_num" autocomplete="off"></el-input>
                ​ </el-form-item>
              ​ <el-form-item label="楼层">
                ​ <el-input v-model="form.layer" autocomplete="off"></el-input>
                ​ </el-form-item>
              ​ <el-form-item label="宿舍号">
                ​ <el-input v-model="form.room_num" autocomplete="off"></el-input>
                ​ </el-form-item>
              ​ <el-form-item label="报修详情">
                ​ <el-input v-model="form.info" autocomplete="off"></el-input>
                ​ </el-form-item>
              <el-form-item label="是否处理">
                <el-select v-model="form.yes_no" autocomplete="off">
                  <el-option label="是" value="是"></el-option>
                  <el-option label="否" value="否"></el-option>
                </el-select>
              </el-form-item>
              ​ </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
            </div> ​
          </el-dialog> -->
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  import moment from 'moment';
  import service from "@/utils/request";
  import { mapGetters } from 'vuex'
import axios from 'axios'
  export default {
    name: 'Repairestudent',
    computed: {
    ...mapGetters([ 'user', 'avatar', "roles",'Token']),
    formattedBirth() {
      // 使用 moment.js 将日期格式化为年月日格式
      return moment(this.user.birth).format('YYYY-MM-DD');
    },
    roles() {
      // 假设你从 Vuex 的 getters 中获取 roles
      return this.$store.getters.roles;
    },
    token(){
      return state.user.token
    },
  },
    
    data() {
      return {
  
        delarr: [],//存放删除的数据
        multipleSelection: [],//多选的数据
        tableData: [],
        msg: "",//记录每一条的信息，便于取id
        floor_num: "",
        dialogFormVisible: false,
        dialogFormVisibles: false,
        pageNum: 1,
        pageSize: 5,
        total: 0,
        form: {},
        collapseBtnClass: 'el-icon-s-fold',
        isCollapse: false,
        logoTextShow: true,
        delVisibleaa: false,
        headerBg: 'headerBg',
        accommodation: {
          building: '',
          floor: null,
          room: '',
          residenceTime: ''
        },
        floor_num: '', // 添加floor_num属性的声明
        layer: '',
        room_num: '',
        time: ''
      }
    },
    created() {
      this.fetchStayinfo(this.user.stu_num);
      this.load();
    },
    methods: {
      fetchStayinfo(stu_num) {
        axios.get('http://localhost:9090/Stayinfo', {
          params: {
            stu_num: stu_num
          }
        })
          .then(response => {
            // 在这里处理返回的居住信息数据
            const stayinfoList = response.data;
            if (stayinfoList.length > 0) {
              const stayinfo = stayinfoList[0]; // 假设只获取第一个住宿信息
              this.accommodation.building = stayinfo.floor_num || ''; // 使用空字符串作为默认值
              this.accommodation.floor = stayinfo.layer || null; // 使用null作为默认值
              this.accommodation.room = stayinfo.room_num || ''; // 使用空字符串作为默认值
              this.accommodation.residenceTime = stayinfo.time || ''; // 使用空字符串作为默认值
            }
          })
          .catch(error => {
            // 处理请求错误
            console.error(error);
          });
      },
      handleSizeChange(pageSize) {
        console.log(pageSize)
        this.pageSize = pageSize
        this.load()
      },
      handleCurrentChange(pageNum) {
        console.log(pageNum)
        this.pageNum = pageNum
        this.load()
      },
      loadDataFromLocalStorage() {
        const storedData = localStorage.getItem('tableData'); // 从本地存储中获取数据
        if (storedData) {
          this.tableData = JSON.parse(storedData); // 将数据解析为对象，并赋值给 tableData
        }
      },
      load() {
        const url = `http://localhost:9090/Repair/pages?pageNum=${this.pageNum}&pageSize=${this.pageSize}&stu_num=${this.user.stu_num}`;
  
        fetch(url)
          .then(res => res.json())
          .then(res => {
            console.log(res);
            this.tableData = res.data.map(item => ({
              ...item,
              repair_time: new Date(item.repair_time).toLocaleDateString('zh-CN')
            }));
            this.total = res.total;
            localStorage.setItem('tableData', JSON.stringify(res.data));
          })
          .catch(error => {
            console.error(error);
            // Handle error condition
          });
      },
  
      reset() {
        this.floor_num = ""
        this.layer = ""
        this.room_num = ""
        this.load()
      },
      handleAdd() {
        this.dialogFormVisible = true
        this.form = {
  
        }
      },
      handleEdit(row) {
        this.form = row
        this.dialogFormVisible = true
      },
      save() {
        const stuNumValue = this.user.stu_num;
        const floor_numValue = this.accommodation.building;
        const layerValue =this.accommodation.floor;
        const room_numValue = this.accommodation.room;
         // 这里使用示例值，您需要根据实际情况进行更改
// 将学号的值赋给this.form.stu_num
        this.form.stu_num = stuNumValue;
        this.form.floor_num = floor_numValue;
        this.form.layer = layerValue;
        this.form.room_num = room_numValue;

        // 格式化日期为中国时间格式
        const repairTime = moment(this.form.repair_time).format('YYYY-MM-DD');
        this.form.repair_time = repairTime;
  
        // 发送保存请求
        service.post("http://localhost:9090/Repair", this.form).then(res => {
          if (res) {
            this.$message.success("保存成功");
            this.dialogFormVisible = false;
            this.load();
          } else {
            this.$message.error("保存失败");
          }
        });
      },
  
      handleDelete(row) {
        this.delVisibleaa = true;
        this.selectedRow = row;
      },
      deleteRow() {
        const { repair_num } = this.selectedRow;
        const url = "http://localhost:9090/Repair/delete";
  
        const params = new URLSearchParams();
        params.append("repair_num", repair_num);
  
        service.delete(`${url}?${params.toString()}`)
          .then(res => {
            if (res) {
              this.$message.success("删除成功");
              this.delVisibleaa = false;
              this.load();
            } else {
              this.$message.error("删除失败");
            }
          })
          .catch(error => {
            this.$message.error("删除失败：" + error.message);
          });
      },
  
  
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      }
    }
  }
  </script>
  <style>
  .headerBg {
    background: #eee !important;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .mll-5 {
    margin-left: 5px;
  }
  </style>
  